<template>
    <!-- 手机评估进度条 -->
    <div class="progress">
        <div class="notice">请按实际情况评估手机，有助于快速回款！</div>
        <div class="num">
            <div class="num-left">{{curLength}}</div>
            <div class="num-right">/{{maxLength}}</div>
        </div>
        <div class="progress-bg" ref="bg"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {}
    },
    props: {
        curLength: {
            type: Number,
            default: 0
        },
        maxLength: {
            type: Number,
            default: 0
        },
    },
    watch: {
        curLength(curVal, oldVal){
            var rate = this.curLength/this.maxLength
            this.$refs.bg.style.width= rate*100 + '%'
        }
    }
}
</script>
<style  lang="less" scoped>
    @import "../../common/less/variable.less";

    .progress{
        width:100%;
        height:30px;
        line-height:30px;
        background:#fff;
        box-shadow:@box-shadow;
        overflow:hidden;
        position:absolute;
        .progress-bg{
            position:absolute;
            left:0;
            top:0;
            z-index:0;
            width:0%;
            height:100%;
            background:@color-yellow;
            transition:all 0.3s ease;
        }
        .notice{
            position:absolute;
            left:10px;
            top:0;
            z-index:1;
            font-size:12px;
            color:@color-alert-title;
        }
        .num{
            position:absolute;
            right:10px;
            top:0;
            z-index:1;
            font-size:12px;
            color:@color-alert-title;
            .num-left{
                float:left;
                font-size:16px;
                color:@color-alert-title
            }
            .num-right{
                float:right;
                font-size:12px;
                color:@color-alert-con
            }
        }

    }
</style>
